import React, { Component } from 'react';
import Child from './Child'
/**
 * 父组件:构造器->render->componentDidMount
 *        当父组件中的state状态数据发生了变化:render->componentDidUpdate（状态更新了多少次，就执行多少次）
 *        当父组件中的内容发生变化，则需要先卸载之前的组件内容，重新挂载新的组件
 *        构造器->render->componentWillUnmount->componentDidMount
 * 
 *  父组件中嵌套子组件:
 *       默认流程:父组件构造器->父组件render->子组件构造器->
 *               子组件render->子组件componentDidMount->父组件componentDidMount
 *       当父组件将state数据通过props属性传递到子组件，并且父组件中的state数据发生变化后：
 *       父组件render->子组件render->子组件componentDidUpdate->父组件componentDidUpdate
 *       
 *  当父组件内容更改之后：
 *       父组件构造器->父组件render->子组件构造器->子组件render->
 *       父组件componentWillUnmount->子组件componentWillUnmount->
 *       子组件componentDidMount->父组件componentDidMount
 * 
 *  当子组件内容更改之后：
 *       子组件构造器->子组件render->子组件componentWillUnmount->子组件componentDidMount
 */
class App extends Component {
  //当组件被渲染/调用的时候，首次先执行构造器
  constructor() {
    super();
    console.log('App-构造器........')
    //状态初始化
    this.state = {
      username: 'admin'
    }
  }
  //先初始化完毕实例化对象之后就要做界面的元素渲染
  render() {
    console.log('App-render....')
    return (
      <div>
        <p>用户名:{this.state.username}</p>
        <button onClick={this.changeUser}>更新账号</button>
        <Child uname={this.state.username}></Child>
      </div>
    );
  }

  changeUser = () => {
    this.setState({
      username: '张三'
    })
  }

  //当组件挂载完成之后
  componentDidMount() {
    console.log('App-组件挂载完成了...')
    //console.log(document.querySelector('p').innerText)
  }

  //当组件中的状态数据被更新了之后执行的钩子函数
  componentDidUpdate() {
    console.log('App-组件中状态被更新了...');
  }

  //当组件被卸载的时候自动执行的钩子函数
  componentWillUnmount() {
    console.log('App-组件被卸载了........');
  }
}

export default App;